8e:I[903690,["/chat-static/_next/static/chunks/0n6wllg1x756a.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/36mpl_ygnfrn4.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3xrj_hsp3fmgn.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2eciheds0i9z4.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1xhlcoq4t-oxn.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3c4glqozsbxzk.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3u--blmtci52c.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0294hnotirvvk.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0scabqnj4rm2y.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/127p2zuv79gkk.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2zak2d_u5iko3.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1yvds7jeqjq8i.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/32f_k_-32djl6.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/021p7s48npd_b.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/23yvy8dlp236r.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/33l5-m17rt5om.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3xuq22wvkumrj.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0xrdaexm-i9k8.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/chunks/0n6wllg1x756a.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/36mpl_ygnfrn4.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3xrj_hsp3fmgn.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2eciheds0i9z4.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1xhlcoq4t-oxn.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3c4glqozsbxzk.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3u--blmtci52c.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0294hnotirvvk.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0scabqnj4rm2y.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/127p2zuv79gkk.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2zak2d_u5iko3.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1yvds7jeqjq8i.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/32f_k_-32djl6.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/021p7s48npd_b.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/23yvy8dlp236r.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/33l5-m17rt5om.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3xuq22wvkumrj.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0xrdaexm-i9k8.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ"],"SWRDataProvider"] 90:T3117,[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { TriangleGridBackground } from "@/components/triangle-grid-background" export default function Home() { return (

Interactive Triangle Grid

Move your mouse around to see the triangles respond with smooth spring-like animations. Use the controls to adjust the behavior!

) } [V0_FILE]typescriptreact:file="components/triangle-grid-background.tsx" isEdit="true" "use client" import { useEffect, useRef, useCallback, useState } from "react" interface Triangle { x: number y: number originalX: number originalY: number vx: number vy: number } interface Config { triangleSize: number spacing: number fillOpacity: number strokeOpacity: number strokeWidth: number springStrength: number damping: number maxDistance: number pushForce: number } interface InteractionSource { x: number y: number radius: number force: number } export function TriangleGridBackground() { const canvasRef = useRef(null) const animationRef = useRef() const trianglesRef = useRef([]) const mouseRef = useRef({ x: 0, y: 0 }) const interactionSourcesRef = useRef([]) const isDarkMode = useRef(false) const [config, setConfig] = useState({ triangleSize: 20, spacing: 40, fillOpacity: 0.05, strokeOpacity: 0.15, strokeWidth: 1, springStrength: 0.02, damping: 0.85, maxDistance: 120, pushForce: 0.8, }) const checkDarkMode = useCallback(() => { isDarkMode.current = document.documentElement.classList.contains("dark") }, []) const createTriangles = useCallback( (width: number, height: number) => { const triangles: Triangle[] = [] const cols = Math.ceil(width / config.spacing) + 2 const rows = Math.ceil(height / config.spacing) + 2 for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { const x = col * config.spacing - config.spacing const y = row * config.spacing - config.spacing triangles.push({ x, y, originalX: x, originalY: y, vx: 0, vy: 0, }) } } trianglesRef.current = triangles }, [config.spacing], ) const drawTriangle = useCallback( (ctx: CanvasRenderingContext2D, x: number, y: number, size: number, fillColor: string, strokeColor: string) => { const height = (size * Math.sqrt(3)) / 2 ctx.beginPath() ctx.moveTo(x, y - height / 2) ctx.lineTo(x - size / 2, y + height / 2) ctx.lineTo(x + size / 2, y + height / 2) ctx.closePath() ctx.fillStyle = fillColor ctx.fill() ctx.strokeStyle = strokeColor ctx.lineWidth = config.strokeWidth ctx.stroke() }, [config.strokeWidth], ) const animate = useCallback(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return ctx.clearRect(0, 0, canvas.width, canvas.height) const interactionElements = document.querySelectorAll("[data-triangle-interaction]") const newSources: InteractionSource[] = [] interactionElements.forEach((element) => { const rect = element.getBoundingClientRect() const canvasRect = canvas.getBoundingClientRect() newSources.push({ x: rect.left + rect.width / 2 - canvasRect.left, y: rect.top + rect.height / 2 - canvasRect.top, radius: Math.max(rect.width, rect.height) * 0.8, force: 0.6, }) }) interactionSourcesRef.current = newSources trianglesRef.current.forEach((triangle) => { let totalForceX = 0 let totalForceY = 0 // Mouse interaction const mouseDx = mouseRef.current.x - triangle.x const mouseDy = mouseRef.current.y - triangle.y const mouseDistance = Math.sqrt(mouseDx * mouseDx + mouseDy * mouseDy) if (mouseDistance < config.maxDistance && mouseDistance > 0) { const force = (config.maxDistance - mouseDistance) / config.maxDistance totalForceX += -(mouseDx / mouseDistance) * force * config.pushForce totalForceY += -(mouseDy / mouseDistance) * force * config.pushForce } // UI element interactions interactionSourcesRef.current.forEach((source) => { const dx = source.x - triangle.x const dy = source.y - triangle.y const distance = Math.sqrt(dx * dx + dy * dy) if (distance < source.radius && distance > 0) { const force = (source.radius - distance) / source.radius totalForceX += -(dx / distance) * force * source.force totalForceY += -(dy / distance) * force * source.force } }) triangle.vx += totalForceX triangle.vy += totalForceY const springX = (triangle.originalX - triangle.x) * config.springStrength const springY = (triangle.originalY - triangle.y) * config.springStrength triangle.vx += springX triangle.vy += springY triangle.vx *= config.damping triangle.vy *= config.damping triangle.x += triangle.vx triangle.y += triangle.vy }) checkDarkMode() const fillColor = isDarkMode.current ? `rgba(255, 255, 255, ${config.fillOpacity})` : `rgba(0, 0, 0, ${config.fillOpacity})` const strokeColor = isDarkMode.current ? `rgba(255, 255, 255, ${config.strokeOpacity})` : `rgba(0, 0, 0, ${config.strokeOpacity})` trianglesRef.current.forEach((triangle) => { drawTriangle(ctx, triangle.x, triangle.y, config.triangleSize, fillColor, strokeColor) }) animationRef.current = requestAnimationFrame(animate) }, [config, drawTriangle, checkDarkMode]) const handleMouseMove = useCallback((event: MouseEvent) => { const canvas = canvasRef.current if (!canvas) return const rect = canvas.getBoundingClientRect() mouseRef.current = { x: event.clientX - rect.left, y: event.clientY - rect.top, } }, []) const handleResize = useCallback(() => { const canvas = canvasRef.current if (!canvas) return const { innerWidth, innerHeight } = window canvas.width = innerWidth canvas.height = innerHeight createTriangles(innerWidth, innerHeight) }, [createTriangles]) useEffect(() => { const canvas = canvasRef.current if (!canvas) return handleResize() window.addEventListener("resize", handleResize) window.addEventListener("mousemove", handleMouseMove) canvas.addEventListener("mousemove", handleMouseMove) animate() return () => { window.removeEventListener("resize", handleResize) window.removeEventListener("mousemove", handleMouseMove) canvas.removeEventListener("mousemove", handleMouseMove) if (animationRef.current) { cancelAnimationFrame(animationRef.current) } } }, [handleResize, handleMouseMove, animate]) const presets = { gentle: { ...config, pushForce: 0.3, maxDistance: 80, springStrength: 0.015, damping: 0.9, }, energetic: { ...config, pushForce: 1.2, maxDistance: 150, springStrength: 0.03, damping: 0.8, }, subtle: { ...config, pushForce: 0.5, maxDistance: 60, springStrength: 0.01, damping: 0.95, fillOpacity: 0.02, strokeOpacity: 0.08, }, } const applyPreset = (presetName: keyof typeof presets) => { setConfig(presets[presetName]) } return ( <>

Interactive Triangle Grid

Triangle Controls

About

Tags

Share

About

Tags

Share

More from fryad

More Templates Like This